אשמח מאוד אם תעזרו לי :)
2 תשובות
ענה
היום מתאימים אתר לסמארטפון על ידי כתיבת שני קבצי CSS שונים,
אחד שמותאם למסך גדול, אחד שמותאם למסך קטן
ולפעמים עוד כמה קבצי CSS נוספים, שמתאימים לטאבלטים, טלפונים עם רזולוציות שונות וכו.
ההבדל העיקרי בין קבצי ה-CSS האלה הוא מיקום האלמנטים בעמוד, הרוחב והגודל שלהם, לעפמים גם צורת התצוגה
כאשר בכל אחד מהמקרים מדובר באותם האלמנטים בעמוד, אך בעיצוב שונה עבורם.
ולאחר שברשותך כמה קבצי CSS שונים, כל אחד מהם מוצג בהתאם לרזולוציה של האתר.
לדפנפנים היום יש פונקציה חדשה, שנקראת media queries ומאפשרת להפעיל קבצים או שורות CSS נפרדות בהתאם לרזולוציה של המסך, ככה שבאמצעותם תוכל לגרום לדפדפן להשתמש בקובץ ה-CSS המתאים.
ורק כדי להיות מדויק לגמרי, אין צורך להפריד את כל ה-CSS לקבצים נפרדים בפועל. אפשר להכניס אותם לתוך קובץ .css פיזי אחד ובאמצעות media queries לומר לדפדפן איזה חלק מהקובץ להפעיל עבור אותה רזולוציה.
בשני שורות media queries נראים ככה:
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
ככה שה-CSS כאן יופעל רק עבור מסכים שרוחבם לא עולה על 6/800 פיקסלים (טבלטים קטנים וסמארטפונים).
לקרוא עוד אפשר כאן וכאן
ענה